<%@ page import="java.net.URLDecoder" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="css/login.css" rel="stylesheet">
    <%--    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">--%>
    <link rel="stylesheet" href="element-ui@2.15.14/qqlib/theme-chalk/index.css">
    <style>
        #trans {
            /*position: absolute;*/
            /*top: 30%;*/
            /*left: 63%;*/
            transform: translate(0, -40%);
            width: 120px;
            height: 38px;
            text-align: center;
            line-height: 38px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            font-family: sans-serif;
            box-sizing: border-box;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 30px;
            /*z-index: 1;*/
            padding: 0;
        }

        #trans:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            from {
                background-position: 0%;
            }
            to {
                background-position: 400%;
            }
        }

        #trans::before {
            content: '';
            position: absolute;
            inset: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 40px;
            opacity: 0;
        }

        #trans:hover::before {
            filter: blur(20px);
            opacity: 1;
            animation: animate 8s linear infinite;
        }

        #reg {
            position: absolute;
            left: 61%;
            top: 30%;
            padding: 10px;
        }

        #reg:hover .el-icon-s-promotion {
            color: gold !important;
        }
    </style>
</head>

<body>

<div id="app" class="loginDiv" style="height: 350px">
    <%--    <el-button @click="show2 = !show2" id="trans">没有账号？</el-button>--%>
    <transition name="el-zoom-in-center">
        <el-button type="primary" id="reg" @click="display" v-show="show">没有账号<i class="el-icon-s-promotion"></i>
        </el-button>
    </transition>
    <transition name="el-zoom-in-center">
        <form id="form" method="post" v-show="show">

            <h1 id="loginMsg">欢迎登录</h1>
            <p><span style="margin-left: 10px"></span>账号:<input style="margin-left: 42px" id="username" name="username" type="text"
                               value="<c:if test="${cookie.username.value != null}">${cookie.username.value}</c:if>">
            </p>

            <p><span style="margin-left: 7px"></span>密码:&nbsp;<input style="margin-left: 40px" id="password" name="password" type="password"
                                     value="<c:if test="${cookie.password.value != null}">${cookie.password.value}</c:if>">
            </p>

            <p>记住我:<input style="margin-left: 36px" id="remember" name="remember" type="checkbox"  <c:if
                    test="${cookie.username.value != null}">
                               checked</c:if>></p>

            <p style="margin-top: 10px;">验证码:
                <input name="checkCode" type="text" id="checkCode" style="vertical-align: middle">
                <img id="checkCodeImage" src="http://localhost:8080/checkCode" style="vertical-align: middle">
                <el-link type="primary" style="font-size: 16px; user-select: none" id="changeImg">看不清？</el-link>
            </p>

            <div id="subDiv">
                <el-button @click="error()" id="trans">登录</el-button>
                <el-button @click="reset" id="trans">重置</el-button>
            </div>
        </form>
    </transition>

    <transition name="el-zoom-in-center">
        <el-button type="primary" id="reg" @click="display()" v-show="show1">已有帐号<i class="el-icon-s-promotion"></i>
        </el-button>
    </transition>
    <transition name="el-zoom-in-center">
        <form id="form1" method="post" v-show="show1" style="width: 300px">

            <h1 id="loginMsg1">欢迎注册</h1>
            <p style="margin-left: -5px"><span style="margin-left: 20px">账号:<input id="username1" name="username" type="text"
                                                   placeholder="请输入用户名">
            </p>

            <p style="margin-left: -5px; margin-bottom: 55px"><span style="margin-left: 20px">密码:<input id="password1" name="password" type="password"
                                                   placeholder="请输入密码">
            </p>

            <div id="subDiv1">
                <el-button @click="error1()" id="trans">注册</el-button>
                <el-button @click="reset1" id="trans">重置</el-button>
            </div>
        </form>
    </transition>

</div>

<script src="js/vue.js"></script>
<script src="element-ui@2.15.14/qqlib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/form-serialize.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                flag: true,
                show: true,
                show1: false,
                disabled: false,
            }
        },
        methods: {
            display() {
                if (this.flag) {
                    this.flag = false
                    if (this.show) {
                        this.show = !this.show
                        setTimeout(() => {
                            this.show1 = !this.show1
                            this.reset1();
                        }, 500)
                    } else {
                        this.show1 = !this.show1
                        setTimeout(() => {
                            this.show = !this.show
                            this.reset();
                        }, 500)
                    }

                    setTimeout(() => {
                        this.flag = true;
                    }, 1000)
                }

            },
            reset() {
                document.querySelector("#form").reset();
            },
            reset1() {
                document.querySelector("#form1").reset();
            },
            error() {
                const form = document.querySelector('#form')
                let info = serialize(form, {hash: true, empty: true})
                if (this.flag) {
                    this.flag = false
                    axios({
                        url: "http://localhost:8080/login",
                        method: "post",
                        data: {
                            "username": info.username,
                            "password": info.password,
                            "remember": info.remember,
                            "checkCode": info.checkCode
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code !== 1) {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 1000
                            })
                            document.querySelector("#checkCode").value = '';
                            document.querySelector("#checkCodeImage").click();
                            setTimeout(() => {
                                this.flag = true;
                            }, 1000)
                        } else {
                            this.$message({
                                message: info.username + '登录成功',
                                type: 'success',
                                duration: 1000
                            })
                            sessionStorage.setItem('token', res.data.data);
                            console.log(sessionStorage.getItem('token'))
                            setTimeout(() => {
                                location.href = "http://localhost:8080/Message wall.jsp"
                            }, 1000)
                        }
                    })
                }
            },
            error1() {
                const form = document.querySelector('#form1')
                let info = serialize(form, {hash: true, empty: true})
                console.log(info)
                if (this.flag) {
                    console.log(11)
                    this.flag = false
                    if (info.username.trim() === '' || info.password.trim() === '') {
                        this.$message({
                            message: "账号密码不能为空",
                            type: 'error',
                            duration: 1000
                        })
                        setTimeout(() => {
                            this.flag = true;
                        }, 1000)
                        return;
                    }

                    axios({
                        url: "http://localhost:8080/register",
                        method: "post",
                        data: {
                            "username": info.username,
                            "password": info.password
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code !== 1) {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 1000
                            })
                            if (res.data.msg === '用户名已存在') {
                                document.querySelector('#username1').value = ''
                                document.querySelector('#password1').value = ''
                            }
                            setTimeout(() => {
                                this.flag = true;
                            }, 1000)
                        } else {
                            this.$message({
                                message: info.username + '注册成功',
                                type: 'success',
                                duration: 1000
                            })
                            setTimeout(() => {
                                this.flag = true
                                location.href = "http://localhost:8080/login.jsp"
                            }, 1000)
                        }
                    })
                }
            }

        },
    })

    document.querySelector("#changeImg").addEventListener("click", () => {
        document.querySelector("#checkCodeImage").src = "/checkCode?" + new Date().getMilliseconds()
    })
    document.querySelector("#checkCodeImage").addEventListener("click", () => {
        document.querySelector("#checkCodeImage").src = "/checkCode?" + new Date().getMilliseconds()
    })

</script>
</body>


</html>